<!DOCTYPE html>
<html lang="en">
	<head>
		<title>单页文档</title>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<script src="./vue.min.js"></script>
		<style>
			*{
				margin: 0;
				padding: 0;
			}
			.stream {
				width: 100vw;
				min-height: 100vh;
				border-radius: 8px;
			}

			.stream .body .member-item {
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin-top: 24px;
				margin-bottom: 24px;
				margin-left: 24px;
				margin-right: 24px;
			}

			.stream .body .member-item .label {
				flex-grow: 1;
				display: block;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
			}

			.stream .body .member-item .value {
				flex-shrink: 0;
			}

			.stream .body::before {
				content: "";
				clear: both;
				display: table;
			}

			.stream .body::after {
				content: "";
				clear: both;
				display: table;
			}

			.stream .body::-webkit-scrollbar {
				display: none;
				/* Chrome Safari */
			}

			.stream::-webkit-scrollbar {
				display: none;
				/* Chrome Safari */
			}
		</style>
	</head>
	<body>
		<div id="app">
			<div style="-webkit-app-region: drag" class="stream"
				:style="{'background-color':`rgba(${streamForm.backgroundColor.r},${streamForm.backgroundColor.g},${streamForm.backgroundColor.b},${streamForm.backgroundColor.a}`}">
				<div class="body" style="-webkit-app-region: drag">
					<div :style="{'font-size':streamForm.fontSize+'px','color':`rgba(${streamForm.fontColor.r},${streamForm.fontColor.g},${streamForm.fontColor.b},${streamForm.fontColor.a}`}"
						class="member-item" v-for="item in memberList" :key="item.id">
						<span class="label">{{item.nickname}}</span>
						<span class="value">{{item.score}}</span>
					</div>
				</div>
			</div>
		</div>

		<script>
			// 创建Vue实例
			new Vue({
        el: '#app',
        data() {
            return {
                isElectron: false,
				memberList: [],
				streamForm: {}
            }
        },
        created() {
			var userAgent = navigator.userAgent.toLowerCase();
			this.isElectron = userAgent.indexOf('electron') > -1
			var streamContent = localStorage.getItem("stream-content")
			console.log("streamContent",streamContent)
			if (streamContent) {
				this.streamForm = streamContent
			}


			this.onEvent()
        },
        mounted() {
        },
        filters: {

        },
        methods: {

            onEvent() {
				var that = this
				if (this.isElectron) {
					const {
						ipcRenderer
					} =
					window.require('electron');
					ipcRenderer.on("stream-content-change", function(event, payload) {
						console.log("stream-content-change", payload)
						if (payload) {
							if (payload.memberList) {
								that.memberList = payload.memberList.filter(ele=>ele.status === 1)
							}
							that.streamForm = payload
							console.log(that.streamForm)
						}

					})
				}
			}

        }
    })
		</script>
	</body>
</html>